<style scoped>
  .weui-form-preview__hd label, .weui-form-preview__hd em {
    font-size: .9em !important;
  }
  .weui-loadmore_line .weui-loadmore__tips {
    background-color: #eee;
  }
  .rj-cell.max span{
    font-size: 16px;
    padding-right: 20px;
  }
  .rj-cell label {
    color: #333;
    font-size: 14px;
    width: 44%;
    display: inline-block;
    padding: 5px 3%;
    text-align: right;
  }
  .rj-cell span {
    font-size: 14px;
    color: #333;
    display: inline-block;
    width: 50%;
  }
  .rj-cell.note label{
    float: left;
  }
  .rj-cell.note span{
    width: 80%;
    display: inline-block;
  }
  .weui-cells {
    margin-top: 0;
  }
  .weui-cells_form {
    background: #fbfbfb;
  }
  .weui-cell {
    background: #fff;
  }
  #acts span {
    font-size: 14px;
  }
  .halfbtn {
    display: inline-block;
    width: 49%;
  }
  .weui-label{
    width: 130px;
    text-align: left;
  }

  .weui-select {
    height: auto;
    line-height: normal;
  }
  *{
    list-style:none;
  }
  #acts span {
    font-size: 14px;
  }
  input.time {
    border: none;
    font-size: 16px;
    padding-left: 10px;
  }

  .weui_uploader_input_wrp {
    float: left;
    position: relative;
    margin-right: 9px;
    margin-bottom: 9px;
    width: 77px;
    height: 77px;
    border: 1px solid #D9D9D9;
  }

  .weui_uploader_hd {
    padding-top: 0;
    padding-right: 0;
    padding-left: 0;
  }

  .weui_uploader_files {
    list-style: none;
  }

  .weui_uploader_input_wrp:before {
    width: 2px;
    height: 39.5px;
  }

  .weui_uploader_input_wrp:before, .weui_uploader_input_wrp:after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #D9D9D9;
  }

  .weui_uploader_input {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }

  .weui_uploader_input_wrp:after {
    width: 39.5px;
    height: 2px;
  }

  .weui_uploader_bd {
    overflow: hidden;
  }

  .weui_cell {
    padding: 10px 15px;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .outstore >>> .weui-uploader_files {
    list-style: none;
    overflow-y: hidden;
  }

  .outstore >>> .weui-uploader_file {
    float: left;
    margin-right: 9px;
    margin-bottom: 9px;
    width: 79px;
    background: no-repeat 50%;
    background-size: cover;
  }

  .weui-cell.fir {
    border-top: 0;
  }

  .help {
    text-align: right;
    padding: 5px;
    font-size: 12px;
    color: #bbb;
  }

  .weui_uploader_input_wrp.inrow {
    width: 30px;
    height: 30px;
    margin: 0;
  }

  .weui_uploader_input_wrp:before {
    height: 19.5px;
  }

  .weui_uploader_input_wrp:after {
    width: 19.5px;
  }

  .weui-uploader_file.inrow {
    margin: 0;
    width: 40px;
  }

  li.weui-uploader_file {
    display: inline-block;
    padding: 3px 5px;
  }

  ul#images {
    text-align: right;
  }
</style>
<template>
  <div class="sendcar">
    <div style="height: 50px; line-height: 50px; background: #f7f7f7; text-align: center; font-size: 16px; border-bottom: 1px solid #bdbbbc; position: relative">
      添加销售合同
      <a href="javascript:;" @click="$router.back(-1)" style="position: absolute; left: 10px; top: 8px">
        <img src="@/assets/back.png" style="width: 20px" />
      </a>
    </div>
    <div class="weui-cells weui-cells_form">
      <form method="post" id="formid">
        <input class="weui-input" type="hidden"    id="customer" name="customer"  >
        <input class="weui-input" type="hidden"    id="orgname" name="orgname"  >


        <div class="cellgroup">

          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">合同名称</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text"   id="name" name="name" placeholder="请填写合同名称" >
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">客户 </label></div>
            <div class="weui-cell__bd">
              <select class="weui-select" name="customerid"  id="customerid" >
                <option value="" disabled>请选择</option>
                <option    v-for="(item, index) in customer" :key="item.guid"  :textValue="item.name"  :value="item.guid">{{item.name}}</option>
              </select>
            </div>
          </div>


          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">公司</label></div>
            <div class="weui-cell__bd">
              <select class="weui-select" name="orgguid" id="orgguid">
                <option value="" disabled>请选择</option>
                <option    v-for="(item, index) in organization" :textValue="item.name"  :key="item.guid" :value="item.guid">{{item.name}}</option>
              </select>
            </div>
          </div>



          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">让利方式</label></div>
            <div class="weui-cell__bd">
              <select class="weui-select" name="concessiontype" id="concessiontype" v-model="concessiontype">
                <option value="" disabled>请选择</option>
                <option v-for="(item, index) in dicts"   :key="item.dictkey" :value="item.dictkey">{{item.dicttext}}</option>
              </select>
            </div>
          </div>

          <div class="weui-cell" v-if="concessiontype == 2">
            <div class="weui-cell__hd"  ><label class="weui-label" >最大扣杂点(%)</label></div>
            <div class="weui-cell__bd">
              <input type="number"   class="weui-input" id="maxdeduct"  name="maxdeduct" placeholder="请填写让利方式"  />
            </div>
          </div>

          <div class="weui-cell" v-if="concessiontype != 3">
            <div class="weui-cell__hd"><label class="weui-label">损耗让利点(%)</label></div>
            <div class="weui-cell__bd">
              <input type="number" class="weui-input" id="maxdiscount"  name="maxdiscount" placeholder="请填写损耗让利百分比"  />
            </div>
          </div>
          <div class="weui-cell" v-if="concessiontype == 1">
            <div class="weui-cell__hd"><label class="weui-label">促销让利点(%)</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="number" name="concession" placeholder="请填写促销让利点" >
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd">
              <label class="weui-label">生效日期</label>
            </div>
            <div class="weui-cell__bd">
              <input type="text" id='datetime-picker' class="time" name="startdate" placeholder="请选择合同生效日期" />
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd">
              <label class="weui-label">失效日期</label>
            </div>
            <div class="weui-cell__bd">
              <input type="text" id='datetime-picker2' class="time" name="enddate" placeholder="请选择合同失效日期" />
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">备注</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text"  id="remark"   name="remark" placeholder="请填写合同备注" >
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">附件上传</label></div>
            <div class="weui-cell__ft">
              <div class="weui_uploader_bd">
                <ul class="weui_uploader_files"></ul>
                <div class="weui_uploader_input_wrp inrow">
                  <UploadFile class="weui_uploader_input" v-on:pushfile="setFile"></UploadFile>
                </div>
              </div>
            </div>
            <ul class="weui-uploader_files" id="images">
              <li class="weui-uploader_file" v-for="(fil, index) in filenames" @click=delFile(fil,fileids[index])>
                {{fil}}
              </li>
            </ul>
          </div>


        </div>
<!--        <SalecontractitemModel v-for="(item, index) in oitems" :key="index" :itemNo="item" :isLast="index+1 == oitems.length" :itemEntity="salecontract.items" :products="products" :specifications="specifications" @doAddItem="addItem(index + 1)" @doDelItem="delItem"></SalecontractitemModel>-->
        <SalecontractitemModel v-for="(item, index) in oitems" :key="index" :itemNo="index" :isLast="index+1 == oitems.length"  :itemEntity="item" :products="products" :concessiontype="concessiontype"  @doAddItem="addItem(index + 1)" @doDelItem="delItem"></SalecontractitemModel>
        <div class="weui-btn-area">
          <a class="weui-btn weui-btn_primary halfbtn subbtn"   href="javascript:" @click="send">提交</a>
          <a class="weui-btn weui-btn_primary halfbtn"  href="javascript:" @click="$router.back(-1)" id="sub">返回</a>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
  import SalecontractitemModel from "./SalecontractitemModel";
  import UploadFile from "@/components/common/UploadFile";

  export default {
    name: 'AddPurchasecontract',
    data () {
      return {
        openid: localStorage.openid,
        guid: '',
        type: 1,
        pickinglist: {},
        items: [],
        salecontract: [],
        specifications: [],
        organizations:[],
        partaorgguid:"",
        oitems: [0],
        customer:[],
        organization:[],
        products:[],
          dicts:[],
        filenames: [],
        fileids: [],
        concessiontype: ''
      }
    },
      components: {SalecontractitemModel, UploadFile},

    created() {
      window.addEventListener('setItem', ()=> {
        this.openid = localStorage.getItem('openid');
      })
    },
    mounted () {
      //日历初始化
      $("#datetime-picker").calendar();
      $("#datetime-picker2").calendar();

      let that = this;
      this.guid = this.$route.query.guid;
      this.type = this.$route.query.type;
      //获取回显数据

      this.getBaseInfo();
      this.getCustomers();
    },
    computed: {

    },


    methods: {
      delFile: function (name, id) {
        let that = this;
        $.confirm('确定要删除？', function () {
          that.axios({
            method: 'post',
            url: '/sales/Fileinfo!delete.action',
            params: {fileid: id}
          })
          that.fileids = that.fileids.filter(item => {
            return item != id;
          })
          that.filenames = that.filenames.filter(item => {
            return item != name;
          })
        })
      },
      setFile: function (file) {
        this.filenames.push(file.name);
        this.fileids.push(file.id);
      },
      addItem: function(index) {
        this.oitems.push(index);
      },
      delItem: function() {
        this.oitems.pop();
      },
      getApplyInfo: function(guid) {
        this.axios({
          method: 'get',
          url: '/sales/Salecontract!list.action',
          params: {guid: guid}
        }).then((response) => {
          if (response.data.flag == 'success') {
            let data = response.data;
            this.salecontract = data.result.rows[0];
          } else {
            this.toastError("系统错误");
          }

        })
      },
        getBaseInfo: function(guid) {
            this.axios({
                method: 'get',
                url: '/sales/Salecontract!getBaseInfo.action',
                params: {pickinglistid: guid}
            }).then((response) => {
                if (response.data.msg == 'success') {
                    let data = response.data;
                    // this.customer = data.customer;
                    this.organization = data.organization;
                    this.products = data.products;
                    this.dicts = data.dicts;

                } else {
                    this.toastError("系统错误");
                }

            })
        },
      getCustomers: function() {
        let that = this;
        this.axios({
          method: 'get',
          responseType: 'json',
          url: '/sales/Customer!getCustomers.action',
          params: {departid: '', functiontype: 13}
        }).then(response => {
          if (response.data.msg == "success") {
            that.customer = response.data.customers;
          } else {
            this.toastText('获取客户数据失败');
          }
        });
      },
      send: function() {
        if ($('#customerid').val() == '') {
          this.toastText('客户不能为空');
          return fasle;
        } else if ($('#orgguid').val() == '') {
          this.toastText('公司不能为空');
          return fasle;
        } else if (this.concessiontype == '') {
          this.toastText('让利方式不能为空');
          return fasle;
        }

          var customer =  $('#customerid').find("option:selected").attr("textValue")
          var orgguid = $('#orgguid').find("option:selected").attr("textValue")

          $('#customer').val(customer);
          $('#orgname').val(orgguid)

        if (!this.checkSubmit()) {
          return false;
        }
        //防止重复提交
        $('.subbtn').attr("disabled",true).css("pointer-events","none");
        //显示提交状态
        $.showLoading("正在提交");

        let postData = this.serialize2Obj($("#formid").serializeArray());
        postData.fileids = this.fileids.join(',');

        let that  = this;
        this.axios({
          method: 'post',
          url: '/sales/Salecontract!save.action?pickinglistid=' + this.guid,
          params: postData
        }).then(response => {
          //恢复提交按钮可点击
          $('.subbtn').attr('disabled', false).css("pointer-events","auto");
          //关闭提交状态
          $.hideLoading();

          if(response.data.msg == "success"){
            this.toastSuccess('操作成功!');
            this.$router.push({name: 'SalecontractList', query: {guid:that.pickinglist.guid}});
          } else if (response.data.msg == 'itemEmpty'){
            this.toastText('合同明细价格和产品为空！');
          }else if (response.data.msg == 'error'){
            this.toastError('系统错误!');
          }
        }).catch(function (error) {
          //恢复提交按钮可点击
          $('.subbtn').attr('disabled', false).css("pointer-events","auto");
          //关闭提交状态
          $.hideLoading();
          that.toastError('系统错误');
        });

      },checkSubmit:function(){
        if(!this.isEmpty("name")){
          this.toastText('请输入合同名称');
          return  false;
        }
        if(!this.isEmpty("customerid")){
          this.toastText('请选择客户');
          return  false;
        }
        if(!this.isEmpty("orgguid")){
          this.toastText('请选择公司');
          return  false;
        }
        if(!this.isEmpty("concessiontype")){
          this.toastText('请选择让利方式');
          return  false;
        }

        return true;
      },
      isEmpty:function(domId){
        if($("#" + domId).val() == null ||  $("#" + domId).val() ==''){
          return false;
        }else{
          return true;
        }
      }

    }
  }


</script>
